<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		

		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>插值表达式</h1>
			<p>a={{a}},b={{b}},c={{c}}</p>
			<p>插值表达式计算：{{a*b+b*c+a*c}}</p>
			<p>计算属性：{{result}}</p>
			<h1>练习</h1>
			圆的半径:<input type="text" v-model="radius"/>
			周长是:{{perimeter}}
			<h2>例2</h2>
			姓:<input type="text" v-model="firstName"/><br />
			名:<input type="text" v-model="lastName"/><br />
			姓名:<input type="text" v-model.lazy="fullName"/><br />
			<h1>例子3 过滤数组</h1>
			<ul>
				<li v-for="s in passStudent">
					{{s.name}},{{s.score}}
				</li>
			</ul>
			<hr />
			<ul>
				<li v-for="s in uppassStudent">
					{{s.name}},{{s.score}}
				</li>
			</ul>
		</div>
		
		<script>
			var app = Vue.createApp({
				data(){
					return {
						a: 10,
						b: 20,
						c: 30,
						radius: 10,
						firstName:"",
						lastName:"",
						stus:[
							{name:"张飞",score:50},
							{name:"张三",score:90},
							{name:"张三丰",score:53},
							{name:"李四",score:99},
							{name:"王五",score:100}
						]
					}
				},
				// template
				// methods
				// 计算属性选项
				computed:{
					passStudent(){
						return this.stus.filter(s => s.score>=60);
					},
					uppassStudent(){
						return this.stus.filter(s=>s.score<60);
					},
					
					result(){
						return this.a*this.b+this.b*this.c+this.a*this.c;
					},
					// 计算周长
					perimeter(){
						return this.radius*2*3.1415926;
					},
					fullName:{
						set(newValue)
						{
							newValue = newValue.trim();
							var names = newValue.split(" ")
							console.log(names)
							this.firstName = names[0]
							this.lastName = names[names.length-1]
						},
						get()
						{
							return this.firstName+""+this.lastName;
						}
					}
				}
			});
			var vm = app.mount("#app")	
		</script>
	</body>
</html>
